@import "../css/var";

.radio {
  display: inline-block;
  height: 0.2rem;
  line-height: 0.2rem;
  position: relative;
  user-select: none;
  vertical-align: middle;

  &.mini {
    height: 0.16rem;
    line-height: 0.16rem;

    .input + .icon {
      width: 0.16rem;
      height: 0.16rem;
    }

    .input:checked + .icon::before {
      width: 0.08rem;
      height: 0.08rem;
    }
  }

  .input {
    position: absolute;
    opacity: 0;

    + .icon {
      display: inline-block;
      width: 0.2rem;
      height: 0.2rem;
      position: relative;
      border: $border;
      background-color: #fff;
      /*box-shadow: #ddd 0 0 0 0 inset;*/
      border-radius: 50%;
      box-sizing: border-box;
      transition: all 0.2s;
      float: left;

      &::before {
        content: "";
        width: 0;
        height: 0;
        border-radius: 50%;
        background-color: $primary;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.2s;
      }
    }

    &:checked {
      &:not(:disabled) ~ .slot {
        color: $primary;
      }

      &:disabled + .icon {
        border: 1px solid #ddd;
        background: #eee;
        transition: all 0.2s;
        cursor: not-allowed;

        &::before {
          background: #999;
        }
      }

      + .icon {
        border-color: $primary;
        /*transition: all 0.2s;*/
        &::before {
          width: 0.1rem;
          height: 0.1rem;
          transition: all 0.2s;
        }
      }

      + .red {
        border-color: $red;

        &::before {
          background-color: $red;
        }
      }

      + .blue {
        border-color: $blue;

        &::before {
          background-color: $blue;
        }
      }

      + .green {
        border-color: $green;

        &::before {
          background-color: $green;
        }
      }

      + .orange {
        border-color: $orange;

        &::before {
          background-color: $orange;
        }
      }

      + .yellow {
        border-color: $yellow;

        & + .yellow::before {
          background-color: $yellow;
        }
      }
    }
  }

  .slot {
    display: inline-block;
    float: left;
    margin-left: 0.05rem;
  }

  .input:disabled + .icon {
    background: #eee;
    transition: all 0.2s;
    cursor: not-allowed;
    opacity: 0.7;
  }

  + .radio {
    margin-left: .1rem;
  }
}
